<template>
    <div class="forum-detail-wrap">
        <div class="card">
            <div class="title">
                <div class="title-left">
                    <div class="title-desc u-line-1">{{ detail.title }}</div>
                </div>
                <div class="title-right">
                    <span>{{ detail.parent_title }} . </span>
                    <span style="color: #9fa6c2">{{ detail.created_at }}</span>
                </div>
            </div>
            <div class="content">
                <div class="content-left">
                    <div class="video" v-if="detail.path">
                        <video-player v-if="detail.id" class="video-player-box" ref="videoPlayer" :options="playerOptions" @ended="videoEndFun" :playsinline="true">
                        </video-player>
                        <div class="video-share">
                            <div class="video-share-item" @click="shoucang">
                                <img v-if="detail.is_like == 1" src="@/assets/img/shoucang2.png" alt="" />
                                <img v-else src="@/assets/img/shoucang.png" alt="" />
                                <span>收藏({{ detail.like_num }})</span>
                            </div>
                            <div class="video-share-item" v-clipboard:copy="hostUrl" v-clipboard:success="() => {
                                    this.$message.success('复制成功');
                                }
                                ">
                                <img src="@/assets/img/fenxiang.png" alt="" />
                                <span>分享</span>
                            </div>
                        </div>
                    </div>

                    <div class="title">
                        <div class="title-desc">详情简介</div>
                    </div>
                    <div class="html" v-html="detail.content || ''"></div>
                </div>
                <div class="content-right">
                    <div class="dir-view">
                        <div class="dir-title">
                            <div class="dir-title-left">
                                <span>合集名称</span>
                                <span style="font-size: 0.15rem; color: #4f546b">({{ current + 1 }}/{{ list.length }})</span>
                            </div>
                            <!-- <div class="dir-title-right">
                                <span style="
                                        font-size: 0.15rem;
                                        color: #4f546b;
                                        margin-right: 0.15rem;
                                    ">自动连播</span>
                                <el-switch v-model="autoplay" active-text="" inactive-text="">
                                </el-switch>
                            </div> -->
                        </div>
                        <el-scrollbar style="height: 5rem">
                            <div class="dir-content">
                                <div class="dir-item" :class="{
                                    'dir-item-active': index == current,
                                }" v-for="(item, index) in list" :key="index" @click="toLinkFun(item)">
                                    <div class="dir-item-left u-line-1">
                                        [{{ item.parent_title }}]
                                        {{ item.title }}
                                    </div>
                                    <div class="dir-item-right">
                                        {{ item.time }}
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>

                    <div class="list">
                        <div class="item" v-for="(item, index) in hotList" :key="index" @click="toLinkFun(item)">
                            <div class="item-img">
                                <img :src="item.thumb" alt="" />
                            </div>
                            <div class="item-content">
                                <div class="item-title u-line-2">
                                    {{ item.title }}
                                </div>
                                <div class="item-text">
                                    <span>{{ item.type_title }}</span> ·
                                    <span style="color: #9fa6c2">{{
                                        item.created_at
                                    }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="m-bottom-empty"></div>
    </div>
</template>


<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import { getProduct, getProductList } from "@/api/study";
import { addCollect } from "@/api/know";
import { mustLogin } from "@/utils/utils";

export default {
    components: {
        videoPlayer,
    },
    data() {
        return {
            hostUrl: window.location.href,
            autoplay: this.$route.query.autoplay == 1?true : false,
            playerOptions: {
                id: "video-detail",
                muted: true,
                controls: true,
                language: "zh",
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [],
                poster: "",
            },
            detail: {},
            list: [],
            current: 0,
            hotList: [],
        };
    },
    mounted() {
        this.getDetailFun();
        this.getHotListFun();
    },
    methods: {
        shoucang() {
            mustLogin.call(this, () => {
                addCollect({
                    id: this.detail.id,
                    type: 1,
                    type_id: this.detail.type_id,
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                        this.getDetailFun();
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            });
        },
        videoEndFun(){
            if(this.autoplay){
                if(this.current < this.list.length - 1){
                    let item = this.list[this.current + 1];
                    this.toLinkFun(item,1);
                }
            }
        },
        toLinkFun(item) {
            this.$router.replace({ path: "/study-detail/" + item.id, query: { autoplay: this.autoplay ? 1 : ''}});
        },
        getListFun() {
            getProductList({
                page: 1,
                limit: 100,
                parent_id: this.detail.parent_id,
            }).then((res) => {
                if (res.code == 200) {
                    this.list = res.data.list;
                    this.current = this.list.findIndex((item, index) => {
                        return item.id == this.detail.id;
                    });
                }
            });
        },
        getHotListFun() {
            getProductList({ page: 1, limit: 10, is_tuijian: 1 }).then(
                (res) => {
                    if (res.code == 200) {
                        this.hotList = res.data.list;
                    }
                }
            );
        },
        getDetailFun() {
            getProduct({ id: this.$route.params.id }).then((res) => {
                if (res.code == 200) {
                    // res.data.path = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
                    this.detail = res.data;
                    this.playerOptions.poster = res.data.thumb;
                    this.playerOptions.sources = [
                        {
                            type: "video/mp4",
                            src: res.data.path,
                        },
                    ];
                    if(this.$route.query.autoplay == 1){
                        this.$nextTick(()=>{
                            this.$refs.videoPlayer.player.play()
                        })
                    }
                    this.getListFun();
                }
            });
        },
    },
};
</script>

<style lang="less">
.html {
    font-size: 0.2rem;
    color: #000;
    line-height: 0.3rem;
    margin-top: 0.375rem;

    img {
        max-width: 100%;
        height: auto;
    }
}
</style>

<style lang="less" scoped>
.forum-detail-wrap {
    padding-top: 0.75rem;

    /deep/.el-switch.is-checked .el-switch__core {
        border-color: #4f8af8 !important;
        background-color: #4f8af8 !important;
    }

    /deep/.el-scrollbar__wrap {
        overflow-x: hidden;
    }

    /deep/#video-detail {
        width: 12.125rem;
        height: 7rem;
        border-radius: 0.1rem;
        overflow: hidden;
    }

    /deep/.vjs-big-play-button {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        width: 1.5em;
        height: 1.5em;
    }

    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.5rem;
        padding-bottom: 0.625rem;

        .head-right {
            .push {
                text-align: center;
                line-height: 0.5rem;
                width: 1.5625rem;
                height: 0.5rem;
                background: #4f8af8;
                font-size: 0.2rem;
                color: #fff;
                border-radius: 0.1rem;
                cursor: pointer;
                user-select: none;
            }
        }
    }

    .card {
        margin-bottom: 0.475rem;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 0.875rem;
            background: rgba(#64aefb, 0.1);
            border-top-left-radius: 0.0375rem;
            border-top-right-radius: 0.0375rem;
            padding: 0 0.5rem;

            .title-left {
                display: flex;
                align-items: center;
                width: 12.5rem;
            }

            .title-right {
                font-size: 0.2rem;
                color: #000;

                .push {
                    text-align: center;
                    line-height: 0.5rem;
                    width: 1.5625rem;
                    height: 0.5rem;
                    background: #4f8af8;
                    font-size: 0.2rem;
                    color: #fff;
                    border-radius: 0.1rem;
                    cursor: pointer;
                    user-select: none;
                }
            }

            .title-desc {
                font-size: 0.25rem;
                color: #000;
                line-height: 0.35rem;
                font-weight: 600;
            }

            .title-tip {
                width: 0.6rem;
                height: 0.3rem;
                background: #f18c3c;
                border-radius: 0.025rem;
                text-align: center;
                line-height: 0.3rem;
                font-size: 0.15rem;
                color: #ffffd2;
                margin-right: 0.25rem;
            }
        }

        .content {
            display: flex;
            padding-top: 0.375rem;

            .content-left {
                width: 12.125rem;

                .html {
                    font-size: 0.2rem;
                    color: #000;
                    line-height: 0.3rem;
                    margin-top: 0.375rem;

                    img {
                        max-width: 100%;
                    }
                }

                .video {
                    width: 100%;
                    background: #f1f2f3;
                    border-radius: 0.1rem;
                    overflow: hidden;
                    margin-bottom: 0.375rem;

                    .video-share {
                        display: flex;
                        align-items: center;
                        height: 0.875rem;
                        width: 100%;
                        padding-left: 0.5rem;
                        box-sizing: border-box;

                        .video-share-item {
                            display: flex;
                            align-items: center;
                            font-size: 0.2rem;
                            color: #4f546b;
                            cursor: pointer;
                            user-select: none;
                            margin-right: 0.5rem;

                            img {
                                width: 0.4rem;
                                height: 0.4rem;
                                margin-right: 0.125rem;
                            }
                        }
                    }
                }
            }

            .content-right {
                flex: 1;
                padding-left: 0.375rem;

                .dir-view {
                    width: 100%;
                    height: 6.25rem;
                    box-sizing: border-box;
                    padding: 0.25rem 0;
                    background: #f1f2f3;
                    border-radius: 0.1rem;

                    .dir-title {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 0.75rem;
                        font-size: 0.25rem;
                        color: #000;
                        padding: 0 0.25rem;
                    }

                    .dir-content {
                        padding: 0 0.25rem;

                        .dir-item {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: 0.65rem;
                            cursor: pointer;

                            .dir-item-left {
                                width: 3rem;
                                font-size: 0.2rem;
                                color: #000;
                            }

                            .dir-item-right {
                                font-size: 0.175rem;
                                color: #4f546b;
                            }
                        }

                        .dir-item-active {
                            .dir-item-left {
                                color: #4f8af8;
                            }

                            .dir-item-right {
                                color: #4f8af8;
                            }
                        }
                    }
                }

                .list {
                    padding-top: 0.45rem;

                    .item {
                        display: flex;
                        cursor: pointer;
                        margin-bottom: 0.3rem;

                        .item-img {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 2rem;
                            height: 1.5rem;
                            flex-shrink: 0;
                            margin-right: 0.2rem;

                            img {
                                object-fit: cover;
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .item-title {
                            font-size: 0.25rem;
                            color: #000;
                            line-height: 0.3125rem;
                            font-weight: 800;
                        }

                        .item-text {
                            font-size: 0.2rem;
                            color: #000;
                            margin-top: 0.5rem;
                        }
                    }
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: center;
            padding: 0.625rem 0 1rem;
        }
    }

    .m-bottom-empty {
        width: 100%;
        height: 0.875rem;
    }
}
</style>